<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单换装系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #model {
            width: 300px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 20px auto;
            position: relative;
        }

        #model img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        #clothes-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        #clothes-list img {
            width: 100px;
            height: 100px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>简单换装系统</h1>
    <div id="model">
        <?php
        session_start();
        if (!isset($_SESSION['current_clothes'])) {
            $_SESSION['current_clothes'] = [];
        }
        $currentClothes = $_SESSION['current_clothes'];
        foreach ($currentClothes as $clothes) {
            echo '<img src="' . $clothes . '" alt="Clothes">';
        }
        ?>
    </div>
    <div id="clothes-list">
        <img src="clothes1.png" alt="Clothes 1" data-src="clothes1.png">
        <img src="clothes2.png" alt="Clothes 2" data-src="clothes2.png">
        <img src="clothes3.png" alt="Clothes 3" data-src="clothes3.png">
    </div>
    <script>
        const clothesList = document.getElementById('clothes-list');
        const model = document.getElementById('model');

        clothesList.addEventListener('click', function (event) {
            if (event.target.tagName === 'IMG') {
                const clothesSrc = event.target.dataset.src;
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'change_clothes.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        model.innerHTML = '';
                        response.forEach(function (clothes) {
                            const img = document.createElement('img');
                            img.src = clothes;
                            model.appendChild(img);
                        });
                    }
                };
                xhr.send('clothes=' + clothesSrc);
            }
        });
    </script>
</body>

</html>